<template>
  <div class="index-redis-root">

    <div class="redis-top">
      <el-button @click="reload()" type="info">全局刷新</el-button>
      <el-button type="info">慢日志设置</el-button>
    </div>

    <div class="redis-middle">
      <infoRedis class="info-redis" ref="InfoRedisRef" />
      <infoHitRate class="info-hit-rate" ref="InfoHitRateRef"></infoHitRate>
      <infoKeyCmd class="info-key-cmd" ref="InfoKeyCmdRef"></infoKeyCmd>
      <infoRdb class="info-rdb" ref="InfoRdbRef"></infoRdb>
    </div>

    <div class="redis-bottom">
      <div class="redis-bottom-left">
        <tableInfoAll class="table-info-all info-root" ref="TableInfoAllRef" />
      </div>
      <div class="redis-bottom-right">
        <div class="redis-bottom-right-top">
          <chartBarMemory class="chart-bar-memory info-root" ref="ChartBarMemoryRef"></chartBarMemory>
          <tableDB class="table-db info-root" ref="TableDBRef" />
        </div>
        <div class="redis-bottom-right-bottom">
          <tableSlowLog class="table-slowlog info-root" ref="TableSlowLogRef" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { infoListApi, infoMapApi } from "@/api/redis";
import infoRedis from "./InfoRedis.vue";
import infoKeyCmd from "./InfoKeyCmd.vue";
import infoHitRate from "./InfoHitRate.vue";
import infoRdb from "./InfoRdb.vue";
import tableInfoAll from "./TableInfoAll.vue";
import tableSlowLog from "./TableSlowLog.vue";
import tableDB from "./TableDB.vue";
import chartBarMemory from "./ChartBarMemory.vue";

const InfoRedisRef = ref();
const InfoHitRateRef = ref();
const InfoKeyCmdRef = ref();
const InfoRdbRef = ref();

const TableInfoAllRef = ref();
const TableDBRef = ref();
const TableSlowLogRef = ref();
const ChartBarMemoryRef = ref();

const getInfoList = () => {
  infoListApi().then(resp => {
    TableInfoAllRef?.value?.initList(resp.data)
    TableDBRef?.value?.initList(resp.data)
  })
}

const getInfoMap = () => {
  infoMapApi().then(resp => {
    InfoRedisRef?.value?.initMap(resp.data);
    InfoHitRateRef?.value?.initMap(resp.data);
    InfoKeyCmdRef?.value?.initMap(resp.data);
    InfoRdbRef?.value?.initMap(resp.data);
    ChartBarMemoryRef?.value?.initMap(resp.data);
  })
}

const reload = () => {
  getInfoList();
  getInfoMap();
  TableSlowLogRef?.value?.reload();
}

onMounted(() => {
  reload();
})
</script>

<style scoped lang="scss">
.index-redis-root {
  @include box(100%, 100%);

  .info-root {
    border: 0;
  }
  
  .info-title {
    @include themeColor(#AE564C, #aa4d45)
  }

  .redis-top {
    @include box(100%, 25px);
    @include flex(row, flex-end, center);
  }

  .redis-middle {
    @include box(100%, 150px);
    @include flex(row, flex-start, center);
    margin-top: 10px;

    &>div {
      margin-right: 15px;
    }

    .info-redis {
      @include box(450px, 150px);
      min-width: 450px;
    }

    .info-rdb {
      @include box(275px, 150px);
      min-width: 275px;
    }

    $width: calc((100% - 275px - 450px - 48px) / 2);

    .info-hit-rate {
      @include box($width, 150px);
      min-width: $width;
    }

    .info-key-cmd {
      @include box($width, 150px);
      min-width: $width;
    }
  }

  .redis-bottom {
    @include box(100%, calc(100% - 165px - 35px));
    @include flex(row, flex-start, center);
    margin-top: 15px;

    .redis-bottom-left {
      @include box(450px, 100%);

      .table-info-all {
        @include box(100%, 100%);
        padding: 10px;
      }
    }

    .redis-bottom-right {
      @include box(calc(100% - 450px - 15px), 100%);
      margin-left: 15px;

      .redis-bottom-right-top {
        @include box(100%, 300px);
        @include flex(row, flex-start, center);

        .chart-bar-memory {
          @include box(calc(100% - 280px), 100%);
          padding: 10px;
        }

        .table-db {
          @include box(280px, 100%);
          margin-left: 15px;
        }
      }

      .redis-bottom-right-bottom {
        @include box(100%, calc(100% - 300px - 15px));
        @include flex(row);
        margin-top: 15px;

        .table-slowlog {
          @include box(100%, 100%);
        }


      }

    }
  }
}
</style>